<template>
    <button class="btn" v-text="obj.text?obj.text:'炫酷按钮'">

    </button>
</template>

<script>
    import {reactive} from "@vue/reactivity";

    export default {
        name: "YButton",
        props:['text'],
        setup(props,context){
            let obj=reactive({
                text:props.text
            })
            return{
                obj
            }
        },
        watch:{
            text(newV){
                this.obj.text=newV
            }
        }
    }
</script>

<style scoped lang="less">
    .btn{
        width: 100px;
        height: 50px;
        font-size: 16px;
        border: 0;
        outline: 0;
        position: relative;
        border-radius: 10px;
        overflow:hidden;
        background-color: black;
        color: aquamarine;
        z-index: 1;
        transition: all 0.5s;
        cursor: pointer;

    }
    .btn:hover{
      color: tomato;
    }
    /* .btn:hover::before{
        background-color: aqua;
        animation:mymove 3s ease-in-out infinite;
    }  */
    @keyframes mymove
    {

        to {transform: rotate(1turn);}
    }

    .btn::before{
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200%;
        height: 200%;
        z-index: -2;
        background-color: aqua;
        transform-origin: 0 0;
        animation:mymove 3s linear infinite;

    }

    .btn::after{
        content: "";
        position: absolute;
        background-color: black;
        width:calc(100% - 4px);
        height: calc(100% - 4px);
        left: 2px;
        top: 2px;
        border-radius: 10px;

        z-index: -1;

    }
</style>